<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0px;
            top: 50px;
            z-index: 0;
        }
        .two {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            position: absolute;
            left: 50px;
            top: 100px;
            z-index: 0;
        }
    </style>
</head>
<body>
<input type="button" value="上下左右宽度高度移动到400" id="lrtbwhTo200"/>

<div class="one" id="one"></div>
<div class="two" id="two"></div>


<script>
    //获取元素
    var lrtbwhTo200 = document.getElementById('lrtbwhTo200');
    var one = document.getElementById('one');
    var tow = document.getElementById('tow');

    //lrtbwhTo200注册事件
    lrtbwhTo200.onclick = function () {
        var json = {
            'zIndex':2,
            'top':400,
            'left':400,
            'opacity':0.5,
            'width':200,
            'height':200
        };
        animate(one,json);
    };

    //封装动画
    function animate(ele,obj,fn) {
        clearInterval(ele.timerid);
        ele.timerid = setInterval(function () {
            var flag = true;
            for(var key in obj) {
                if (key =='zIndex' ) {
                    ele.style[key] = obj[key];
                    console.log(obj[key]);
                }else if (key == 'opacity') {
                    var currentLeft = getStyle(ele,key) * 100;
                    var step = (obj[key] * 100 - currentLeft)/10;
                    step = step < 0 ? Math.floor(step) : Math.ceil(step);
                    currentLeft += step;
                    ele.style[key] = currentLeft/100;
                    if(obj[key]*100 != currentLeft){
                        flag = false;
                    }
                }else {
                    var currentLeft = parseInt(getStyle(ele,key));

                    var step = (obj[key]-currentLeft)/10;
                    step = step < 0 ? Math.floor(step) : Math.ceil(step);
                    currentLeft += step;
                    console.log(key+"--step:"+step+"----currentLeft"+currentLeft);
                    ele.style[key] = currentLeft + "px";
                    if(obj[key] != currentLeft){
                        flag = false;
                    }
                }
            }
            if(flag){
                clearInterval(ele.timerid);
                //这里代表动画结束了,动画结束了就执行回调函数.
                if(Object.prototype.toString.call(fn) == "[object Function]"){
                    fn();
                }
            }
        },50)
    }

    //兼容函数
    function getStyle(obj,attr) {
        //能力检测-检测执行当前这个代码的浏览器支持不支持这个东西
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return window.getComputedStyle(obj, null)[attr];
        }
    }

    //失败代码，未知逻辑错误

</script>
</body>
</html>